<template>
  <div class="container">
    <page-header
      :title="pageTitle"
      :showImg="!detection && params.type != 3"
    ></page-header>
    <div class="problem_result_div">
      <div v-if="detection" style="height: 141px;">
        <img
          style="width: 141px; height: 141px;vertical-align:middle"
          :src="currentFrame"
          v-show="currentFrame"
        />
      </div>
      <img
        v-else
        style="width: 141px; height: 141px;vertical-align:middle"
        :src="
          params.type == 3
            ? require('@/assets/img/rent/ic_success.svg')
            : params.type == 4
            ? require('@/assets/img/problem/ic_lost@2x.png')
            : require('@/assets/img/problem/ic_warning.svg')
        "
      />
      <div
        class="problem_result"
        :class="{ problem_result_active: params.type == 3 }"
      >
        {{
          detection
            ? $t('home_searchingPBText')
            : params.type == 3
            ? feebackOrigin == 1
              ? $t('help_submitted')
              : $t('Report_orderRun_ended')
            : params.type == 4
            ? $t('home_lostText').replace(
                '$penaltyAmount',
                formatMoney(params.penaltyAmount)
              )
            : params.type == 5
            ? $t('home_confirmPBIn')
            : $t('home_confirmPBNotEject')
        }}
      </div>
      <div class="problem_text" v-if="params.type == 3">
        <template v-if="isNum(params.penaltyAmount)">
          <div style="margin-bottom: 3px;">
            {{ $t('Report_orderRun_title') }}
          </div>
          <div>
            {{
              $t('help_orderFBText').replace(
                '$penaltyAmount',
                formatMoney(params.penaltyAmount)
              )
            }}
          </div>
        </template>
        <template v-else>
          {{
            feebackOrigin == 1
              ? $t('Report_result_thanks')
              : $t('help_thankText')
          }}
        </template>
      </div>
    </div>

    <van-dialog v-model="showDialog" :showConfirmButton="false">
      <div class="dialog_contont">
        {{ isInCabinet ? $t('home_pbFoundResult') : $t('home_unfindPB') }}
      </div>
      <div class="dialog_btn">
        <div class="dialog_btn_div flex_center" @click="leftCLick">
          {{ isInCabinet ? $t('order_homePage') : $t('home_recheck') }}
        </div>
        <div class="dialog_btn_div flex_center" @click="rightCLick">
          {{ isInCabinet ? $t('home_viewOrder') : $t('home_reportIssue') }}
        </div>
      </div>
    </van-dialog>

    <bottom-button
      @click="comfirmBtn"
      :CheckImg="params.type == 4"
      agreementName="login_termOfUse1"
      @clickText="isDisabled = !$event"
      :disabled="isDisabled"
      @clickAgreement="clickAgreement"
      v-show="!detection && !showDialog"
    >
      <span>{{
        params.type == 3 ? $t('order_homePage') : $t('home_confirm')
      }}</span>
    </bottom-button>
  </div>
</template>
<script>
import $api from '@/assets/js/api/home'
import $login from '@/assets/js/api/login'
import share from '@/mixins/share'
export default {
  mixins: [share],
  data () {
    return {
      //是否检测
      detection: false,
      //是否在机柜
      isInCabinet: false,
      //检测充电宝次数
      indexs: 0,
      //检测充电宝定时器
      intervalIds: null,
      //检测动画定时器
      intervalId: null,
      // 当前显示的序列帧图片路径
      currentFrame: '',
      // 保存所有序列帧图片路径的数组
      frameList: [],
      // 页头标题
      pageTitle: '',
      params: {
        type: '2', // 3、反馈成功 4、充电宝丢失 5、订单未结束 6、未弹出充电宝
        orderNo: '', // 订单号
        penaltyAmount: '' // 罚金
      },
      showDialog: false,
      userUrls: '',
      isDisabled: false,
      feebackOrigin: 0 // 反馈来源 1：意见反馈
    }
  },
  beforeDestroy () {
    if (this.intervalIds) {
      clearInterval(this.intervalIds)
      this.intervalIds = null
    }
    if (this.intervalId) {
      clearInterval(this.intervalId)
      this.intervalId = null
    }
  },
  created () {
    this.getLang()

    this.params = JSON.parse(this.$route.query.params);
    this.feebackOrigin = this.$route.query.feebackOrigin || 0
    if (this.params.type == 4) {
      this.getConfigs()
    }
    this.changeTitle(this.params.type)
    this.loadFrames()
  },
  methods: {
    isNum (val) {
      if (!val) {
        return val === 0
      }
      return true
    },
    clickAgreement () {
      if (!this.userUrls) return
      localStorage.setItem(
        'webUrl',
        JSON.stringify({
          url: `${this.userUrls}?lang=${this.$store.state.locale}`,
          title: 'login_termOfUse'
        })
      )

      this.$router.push({
        path: '/web-view'
      })
    },
    //获取配置数据
    getConfigs () {
      $login.getConfigs(true).then(res => {
        if (res.code == 0) {
          localStorage.setItem('configs', JSON.stringify(res.data))
          res.data.forEach(item => {
            if (item.key == 'terms-of-use') {
              this.userUrls = item.value
            }
          })
        }
      })
    },
    //图片编号处理
    padZero (num) {
      if (num >= 10) {
        return num
      } else {
        return '0' + num
      }
    },

    // 初始化加载序列帧图片
    loadFrames () {
      for (let i = 1; i < 54; i++) {
        this.frameList[
          i
        ] = require(`@/assets/img/problem/test/loading_${this.padZero(i)}.png`)
      }
    },

    // 开始播放序列帧动画
    startPlaying () {
      let index = 1
      this.intervalId = setInterval(() => {
        // 达到最后一张图片后清除定时器
        if (index >= this.frameList.length) {
          clearInterval(this.intervalId)
          this.startPlaying()
          return
        }
        this.currentFrame = this.frameList[index]
        index++
      }, 20) // 每20ms更新一次图片
    },

    // 开始检测充电宝
    startCheck () {
      this.changeTitle(this.$t('home_searchingPB'))
      this.intervalIds = setInterval(() => {
        if (this.indexs <= 3) {
          this.indexs += 1
          this.getOrdersInStations()
        } else {
          clearInterval(this.intervalIds)
          clearInterval(this.intervalId)
          this.indexs = 0
          this.detection = false
          this.showDialog = true
          this.changeTitle(this.params.type)
        }
      }, 5000) // 每5000ms更新
    },

    // 订单问题上报,第一步确认
    getOrdersInStations () {
      // console.log(this.indexs)
      $api.getOrdersInStation(this.params.orderNo, true).then(res => {
        if (res.code == 0) {
          this.isInCabinet = res.data.isInCabinet
          if (res.data.isInCabinet) {
            clearInterval(this.intervalIds)
            clearInterval(this.intervalId)
            this.indexs = 0
            this.detection = false
            this.showDialog = true
            this.changeTitle(this.params.type)
          }
        } else {
          this.$message.info(res.message)
        }
      })
    },

    // 首页/重新检测
    leftCLick () {
      if (this.isInCabinet) {
        this.showDialog = false
        this.$router.push('/home')
      } else {
        clearInterval(this.intervalId)
        this.intervalId = null
        this.indexs = 0
        this.showDialog = false
        this.comfirmBtn()
      }
    },

    // 查看订单/上报问题
    rightCLick () {
      if (this.isInCabinet) {
        this.$router.push({
          path: '/order/detail',
          query: { orderNo: this.params.orderNo }
        })
      } else {
        let params = {
          orderNo: this.params.orderNo,
          problemType: 1,
          orderType: this.params.type == 6 ? 1 : 2,
          penaltyAmount: this.params.penaltyAmount
        }
        this.$router.push({
          path: '/problem',
          query: { params: JSON.stringify(params) }
        })
      }
      if (this.intervalId) {
        clearInterval(this.intervalId)
        this.intervalId = null
      }
      this.showDialog = false
    },

    //底部按钮
    comfirmBtn () {
      if (this.params.type == 4) {
        this.$router.push({
          path: '/pay/way',
          query: { orderNo: this.params.orderNo, type: 7 }
        })
      } else if (this.params.type == 3) {
        this.$router.push('/home')
      } else {
        this.detection = true
        this.currentFrame = ''
        this.startPlaying()
        this.startCheck()
      }
    },

    //修改标题
    changeTitle (value) {
      this.pageTitle = ''
      switch (value) {
        case 3:
          this.pageTitle = ''
          break
        case 4:
          this.pageTitle = this.$t('home_reportLost')
          break
        case 5:
          this.pageTitle = this.$t('home_orderDidNotEnd')
          break
        case 6:
          this.pageTitle = this.$t('home_failedEject')
          break
        default:
          this.pageTitle = value
          break
      }
    }
  }
}
</script>

<style lang="scss">
.container {
  background: #f5f5f7;
  .problem_result_div {
    width: calc(100% - 56px);
    padding: 28px 28px 108px;
    text-align: center;
    .problem_result {
      font-size: 17px;
      font-weight: 600;
      text-align: center;
      color: #889dbb;
      line-height: 20px;
    }
    .problem_result_active {
      color: var(--text-color) !important;
      font-size: 20px !important;
      line-height: 24px !important;
    }
    .problem_text {
      font-size: 14px;
      font-weight: 500;
      text-align: center;
      color: #889dbb;
      line-height: 16px;
      margin-top: 8px;
    }
  }
}

.van-dialog {
  width: calc(100% - 56px) !important;
  border-radius: 13px !important;
  .dialog_contont {
    padding: 20px;
    font-size: 17px;
    font-weight: 500;
    text-align: center;
    color: #39404d;
    line-height: 20px;
  }
  .dialog_btn {
    height: 52px;
    display: flex;
    border-top: #eeeef5 1px solid;
    .dialog_btn_div {
      position: relative;
      flex: 1;
      color: var(--text-color);
      font-size: 17px;
      font-weight: 600;
      line-height: 20px;
      &:nth-child(1)::before {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        width: 1px;
        height: 30px;
        background-color: #eeeef5;
        transform: translateY(-50%);
      }
    }
  }
}
</style>
